<template>
	<view class="profile-page">
		<!-- 毛玻璃背景 -->
		<view class="blur-bg"></view>

		<!-- 顶部用户信息卡片 -->
		<view class="user-card">
			<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
			<view class="user-detail">
				<text class="username">乡村用户</text>
				<text class="user-level">VIP会员</text>
			</view>
			<view class="user-stats">
				<text class="stat-value">{{allOrders.length}}</text>
				<text class="stat-label">累计订单</text>
			</view>
		</view>

		<!-- 最近订单卡片 -->
		<!-- 最近订单卡片 -->
		<view class="recent-order">
		  <view class="order-header">
		    <text class="order-title">最近订单</text>
		    <text class="order-status" :class="'status-' + recentOrder.status">
		      <uni-icons :type="getStatusIcon(recentOrder.status)" size="20"
		        :color="getStatusColor(recentOrder.status)"></uni-icons>
		      {{recentOrder.statusText}}
		    </text>
		  </view>
		
		  <view class="order-content">
		    <view class="order-info">
		      <view class="info-row">
		        <uni-icons type="location" size="20" color="#666"></uni-icons>
		        <text class="info-text">{{recentOrder.pickupAddress}}</text>
		      </view>
		      <view class="info-row">
		        <uni-icons type="home" size="20" color="#666"></uni-icons>
		        <text class="info-text">{{recentOrder.deliveryAddress}}</text>
		      </view>
		      <view class="info-row">
		        <uni-icons type="calendar" size="20" color="#666"></uni-icons>
		        <text class="info-text">{{recentOrder.createTime}}</text>
		      </view>
		    </view>
		    <image class="order-image" :src="recentOrder.image" mode="aspectFill"></image>
		  </view>
		
		 <view class="order-progress">
		   <view class="progress-container">
		     <view class="progress-step" :class="{active: recentOrder.status >= '0'}">
		       <view class="step-icon">
		         <uni-icons type="cart" size="28" 
		           :color="recentOrder.status >= '0' ? getStatusColor('0') : '#ccc'"></uni-icons>
		       </view>
		       <text class="step-text" :style="{color: recentOrder.status >= '0' ? getStatusColor('0') : '#ccc'}">待接单</text>
		     </view>
		 
		     <view class="progress-line" :class="{active: recentOrder.status >= '1'}"></view>
		 
		     <view class="progress-step" :class="{active: recentOrder.status >= '1'}">
		       <view class="step-icon">
		         <uni-icons type="cloud-download" size="28" 
		           :color="recentOrder.status >= '1' ? getStatusColor('1') : '#ccc'"></uni-icons>
		       </view>
		       <text class="step-text" :style="{color: recentOrder.status >= '1' ? getStatusColor('1') : '#ccc'}">已接单</text>
		     </view>
		 
		     <view class="progress-line" :class="{active: recentOrder.status >= '2'}"></view>
		 
		     <view class="progress-step" :class="{active: recentOrder.status >= '2'}">
		       <view class="step-icon">
		         <uni-icons type="paperplane" size="28" 
		           :color="recentOrder.status >= '2' ? getStatusColor('2') : '#ccc'"></uni-icons>
		       </view>
		       <text class="step-text" :style="{color: recentOrder.status >= '2' ? getStatusColor('2') : '#ccc'}">配送中</text>
		     </view>
		 
		     <view class="progress-line" :class="{active: recentOrder.status >= '3'}"></view>
		 
		     <view class="progress-step" :class="{active: recentOrder.status >= '3'}">
		       <view class="step-icon">
		         <uni-icons type="checkmarkempty" size="28" 
		           :color="recentOrder.status >= '3' ? getStatusColor('3') : '#ccc'"></uni-icons>
		       </view>
		       <text class="step-text" :style="{color: recentOrder.status >= '3' ? getStatusColor('3') : '#ccc'}">已完成</text>
		     </view>
		   </view>
		 </view>
		
		  <button class="order-action" @click="viewOrderDetail(recentOrder)">
		    <text>查看详情</text>
		    <uni-icons type="arrowright" size="20" color="#4a90e2"></uni-icons>
		  </button>
		</view>

		<!-- 订单分类选项卡 -->
		<view class="order-tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" @click="navigateToOrderList(tab)">
				<uni-icons :type="tab.icon" size="28" :color="getTabColor(tab.status)"></uni-icons>
				<text :style="{color: getTabColor(tab.status)}">{{tab.name}}</text>
				<view class="tab-badge" v-if="tab.badge" :style="{backgroundColor: getTabColor(tab.status)}">
					{{tab.badge}}</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-container">
			<view class="menu-item" @click="navigateTo('address')">
				<view class="menu-icon" style="background-color: rgba(255, 152, 0, 0.1)">
					<uni-icons type="location" size="28" color="#FF9800"></uni-icons>
				</view>
				<text class="menu-text">地址管理</text>
				<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
			</view>

			<view class="menu-item" @click="navigateTo('wallet')">
				<view class="menu-icon" style="background-color: rgba(76, 175, 80, 0.1)">
					<uni-icons type="wallet" size="28" color="#4CAF50"></uni-icons>
				</view>
				<text class="menu-text">消费统计</text>
				<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
			</view>

			<view class="menu-item" @click="navigateTo('coupons')">
				<view class="menu-icon" style="background-color: rgba(156, 39, 176, 0.1)">
					<uni-icons type="gift" size="28" color="#9C27B0"></uni-icons>
				</view>
				<text class="menu-text">我要反馈</text>
				<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
			</view>

			<view class="menu-item" @click="navigateTo('settings')">
				<view class="menu-icon" style="background-color: rgba(33, 150, 243, 0.1)">
					<uni-icons type="gear" size="28" color="#2196F3"></uni-icons>
				</view>
				<text class="menu-text">设置</text>
				<uni-icons type="arrowright" size="24" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<!-- <button class="logout-btn" @click="logout">
      <text>退出登录</text>
    </button> -->
	</view>
</template>

<script>
import {
  globalVariable
} from '../../configMy.js';

export default {
  data() {
    return {
      activeTab: 0,
      tabsData: [
        { name: '全部', icon: 'list', status: 'all' },
        { name: '待接单', icon: 'cart', status: '0' },
        { name: '已接单', icon: 'cloud-download', status: '1' },
        { name: '配送中', icon: 'paperplane', status: '2' },
        { name: '已完成', icon: 'checkmarkempty', status: '3' },
        { name: '已取消', icon: 'close', status: '4' }
      ],
      allOrders: [],
      recentOrder: {},
      animationData: {},
      userInfo: {
        id: 0,
        name: '',
        phone: '',
        address: ''
      }
    }
  },
  computed: {
    tabs() {
      return this.tabsData.map(tab => ({
        ...tab,
        badge: this.getTabBadge(tab.status),
        filter: this.getTabFilter(tab.status)
      }))
    }
  },
  onLoad() {
    this.loadCachedData();
    this.fetchOrders();
  },
  methods: {
    loadCachedData() {
      const cachedUser = uni.getStorageSync('userInfo');
      if (cachedUser && cachedUser) {
        this.userInfo = {
          id: cachedUser.id,
          name: cachedUser.name,
          phone: cachedUser.phone,
          address: cachedUser.address
        };
      }
    },
    fetchOrders() {
      uni.request({
        url: `${globalVariable}/order/villagerOrders?villagerId=${this.userInfo.id}`,
        method: 'GET',
        success: (res) => {
          if (res.data.status === 1) {
            this.allOrders = res.data.data.map(order => ({
              id: order.id,
              orderNo: `DD${order.id.toString().padStart(6, '0')}`,
              status: order.status.toString(),
              statusText: this.getStatusText(order.status),
              pickupAddress: order.pickupLocation,
              deliveryAddress: this.userInfo.address,
              createTime: order.createTime,
              price: order.finalPrice,
              image: '/static/package.png',
              courier: order.courierName ? {
                name: order.courierName,
                phone: order.courierPhone
              } : null,
              remarks: order.itemRemarks,
              pickupCode: order.pickupCode
            }));
            
            // 设置最近订单（按创建时间倒序取第一个）
            if (this.allOrders.length > 0) {
              this.allOrders.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
              this.recentOrder = this.allOrders[0];
            }
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '获取订单失败',
            icon: 'none'
          });
        }
      });
    },
    getStatusText(status) {
      const statusMap = {
        '0': '待接单',
        '1': '已接单',
        '2': '配送中',
        '3': '已完成',
        '4': '已取消'
      };
      return statusMap[status] || '未知状态';
    },
    getTabBadge(status) {
      if (status === 'all') return this.allOrders.length;
      return this.allOrders.filter(o => o.status === status).length;
    },
    getTabFilter(status) {
      if (status === 'all') return (orders) => orders;
      return (orders) => orders.filter(o => o.status === status);
    },
    getTabColor(status) {
      switch(status) {
        case '0': return '#FF9800'; // 待接单 - 橙色
        case '1': return '#2196F3'; // 已接单 - 蓝色
        case '2': return '#fc0a07'; // 配送中 - 黄色
        case '3': return '#4CAF50'; // 已完成 - 绿色
        case '4': return '#9E9E9E'; // 已取消 - 灰色
        default: return '#4a90e2'; // 默认 - 主色调蓝色
      }
    },
    navigateToOrderList(tab) {
      const payload = {
        activeTab: this.tabs.findIndex(t => t.status === tab.status),
        allTabs: this.tabs,
        allOrders: this.allOrders,
        initialFilter: tab.status
      }
      
      uni.navigateTo({
        url: '/pages/orderList/orderList',
        success: (res) => {
          res.eventChannel.emit('acceptData', payload)
        }
      });
    },
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/${page}/${page}`
      });
    },
    viewOrderDetail(order) {
      uni.navigateTo({
        url: `/pages/orderDetail/orderDetail?orderId=${order.id}`
      });
    },
    getStatusIcon(status) {
      switch(status) {
        case '0': return 'cart';
        case '1': return 'paperplane';
        case '2': return 'car';
        case '3': return 'checkmarkempty';
        case '4': return 'close';
        default: return 'help';
      }
    },
    getStatusColor(status) {
      switch(status) {
        case '0': return '#FF9800'; // 待接单 - 橙色
        case '1': return '#2196F3'; // 已接单 - 蓝色
        case '2': return '#fc0006'; // 配送中 - 黄色
        case '3': return '#4CAF50'; // 已完成 - 绿色
        case '4': return '#9E9E9E'; // 已取消 - 灰色
        default: return '#666';
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('userInfo');
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  position: relative;
  min-height: 100vh;
  padding: 30rpx;
  padding-bottom: 160rpx;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 毛玻璃背景 */
.blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 10% 20%, rgba(255, 15, 51, .1) 0, transparent 20%), radial-gradient(circle at 90% 80%, rgba(8, 255, 111, .1) 0, transparent 20%);
  backdrop-filter: blur(20rpx);
  z-index: 0;
}

/* 用户卡片 - 毛玻璃效果 */
.user-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(74, 144, 226, 0.2);
    margin-right: 30rpx;
  }

  .user-detail {
    flex: 1;

    .username {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .user-level {
      display: inline-block;
      font-size: 24rpx;
      color: #FF9800;
      background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 193, 7, 0.1));
      padding: 5rpx 15rpx;
      border-radius: 20rpx;
    }
  }

  .user-stats {
    text-align: center;

    .stat-value {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #4a90e2;
      margin-bottom: 5rpx;
    }

    .stat-label {
      display: block;
      font-size: 24rpx;
      color: #666;
    }
  }
}

/* 最近订单卡片 - 毛玻璃效果 */
.recent-order {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;

    .order-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .order-status {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      padding: 5rpx 15rpx;
      border-radius: 20rpx;

      uni-icons {
        margin-right: 8rpx;
      }

      &.status-0 {
        background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 193, 7, 0.1));
        color: #FF9800;
      }

      &.status-1 {
        background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(3, 169, 244, 0.1));
        color: #2196F3;
      }

      &.status-2 {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 235, 59, 0.1));
        color: #fc1707;
      }

      &.status-3 {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));
        color: #4CAF50;
      }

      &.status-4 {
        background: linear-gradient(135deg, rgba(158, 158, 158, 0.1), rgba(189, 189, 189, 0.1));
        color: #9E9E9E;
      }
    }
  }

  .order-content {
    display: flex;
    margin-bottom: 30rpx;

    .order-info {
      flex: 1;

      .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;

        &:last-child {
          margin-bottom: 0;
        }

        uni-icons {
          margin-right: 10rpx;
        }

        .info-text {
          font-size: 26rpx;
          color: #666;
        }
      }
    }

    .order-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
      margin-left: 20rpx;
    }
  }

  .order-action {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70rpx;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
    border-radius: 35rpx;
    color: #4a90e2;
    font-size: 28rpx;
    border: none;
    box-shadow: 0 4rpx 15rpx rgba(74, 144, 226, 0.1);

    text {
      margin-right: 10rpx;
    }
  }
}

/* 订单进度条 - 毛玻璃效果 */
.order-progress {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  .progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .progress-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;

      .step-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;
        box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
        transition: all 0.5s ease;
      }

      .step-text {
        font-size: 26rpx;
        color: #666;
        transition: all 0.3s ease;
      }

      &.active {
        .step-text {
          color: #4a90e2;
          font-weight: bold;
        }
      }
    }

    .progress-line {
      flex: 1;
      height: 4rpx;
      background: #eee;
      margin: 0 10rpx;
      position: relative;
      transition: all 0.5s ease;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, #FF9800, #2196F3, #FFC107, #4CAF50);
        transition: all 1s ease 0.3s;
      }

      &.active::after {
        width: 100%;
      }
    }
  }
}

/* 订单分类选项卡 - 毛玻璃效果 */
.order-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #666;
    position: relative;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
    }

    uni-icons {
      margin-bottom: 10rpx;
    }

    .tab-badge {
      position: absolute;
      top: -10rpx;
      right: 10rpx;
      color: #fff;
      font-size: 20rpx;
      min-width: 30rpx;
      height: 30rpx;
      border-radius: 15rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }
  }
}

/* 功能菜单 - 毛玻璃效果 */
.menu-container {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

    &:last-child {
      border-bottom: none;
    }

    .menu-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
    }

    .menu-text {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}

/* 退出登录按钮 - 毛玻璃效果 */
.logout-btn {
  display: block;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10rpx);
  border-radius: 10rpx;
  color: #FF5722;
  font-size: 32rpx;
  border: none;
  box-shadow: 0 8rpx 30rpx rgba(255, 87, 34, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  &:active {
    background: rgba(255, 255, 255, 0.8);
  }
}

/* 布灵布灵动画效果 */
@keyframes twinkle {
  0%, 100% {
    box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 30rpx rgba(255, 255, 255, 0.9);
  }
}

.user-card,
.recent-order,
.order-progress,
.order-tabs,
.menu-container,
.logout-btn {
  animation: fadeInDown 0.5s ease;
  background-color: rgba(255, 255, 255, 0.5);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>